<!DOCTYPE html>
<html lang="en" xmlns:h="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>验证用户名</title>

    <script>
      function onclickFun(){

          //1.当我们要操作一个标签的的时候，一定要先获取这个标签的对象
          var userNameObj = document.getElementById("userName");
          var userNameText = userNameObj.value;
          var patt = /^\w{5,12}$/;

          var userNameSpanObj = document.getElementById("userNameSpan");

          if(patt.test(userNameText)){
            //userNameSpanObj.innerHTML = "用户名合法";                //用汉字作为提示
            userNameSpanObj.innerHTML = "<img src=\"duihao.png\">";    //用图标作为提示
          }else {
            //userNameSpanObj.innerHTML = "用户名非法";
              userNameSpanObj.innerHTML = "<img src=\"chahao.png\">";
          }

      }


    </script>
</head>
<body>
    <table>
      <tr>
        <td>输入用户名：</td>
        <td><input type="text" id="userName" value=""/>
          <span id="userNameSpan" style="color: red;">

          </span>
        </td>
        <td><button onclick="onclickFun()">校验</button></td>
      </tr>
    </table>





<hr/>
<h4>补充知识点：span 标签 </h4>
    用法1：使用span元素对文本中的一部分进行着色<br>
<p>这条狗的毛发是<span style="color: blue">蓝色</span>的，真特殊呀！</p>
<p>
  span 用于对文档中的行内元素进行组合。<br>
  span 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。<br>
  如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。<br>
  span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。<br>
  提示：被 span 元素包含的文本，您可以使用 CSS 对它定义样式，或者使用 JavaScript 对它进行操作。<br>
</p>
</body>
</html>